<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>折线应用: 路线规划</title>
</head>
<script charset="utf-8"
        src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style>
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #mapContainer {
        width: 100%;
        height: 100%;
    }
</style>

<body onload="initMap()">
<div id="mapContainer"></div>
</body>

</html>
<script>
    //注：本例仅为说明流程，不保证严谨

    var map;
    function initMap(){
        //初始化地图
        map = new TMap.Map('mapContainer', {
            center: new TMap.LatLng(39.980619,116.321277),//地图显示中心点
            zoom:14	//缩放级别
        });

        //WebServiceAPI请求URL（驾车路线规划默认会参考实时路况进行计算）
        var url="https://apis.map.qq.com/ws/direction/v1/driving/"; //请求路径
        url+="?from=39.984039,116.307630";  //起点坐标
        url+="&to=39.977263,116.337063";  //终点坐标
        url+="&output=jsonp&callback=cb" ;	//指定JSONP回调函数名，本例为cb
        url+="&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"; //开发key，可在控制台自助创建


        //发起JSONP请求，获取路线规划结果
        jsonp_request(url);
    }

    //浏览器调用WebServiceAPI需要通过Jsonp的方式，此处定义了发送JOSNP请求的函数
    function jsonp_request(url){
        var script=document.createElement('script');
        script.src=url;
        document.body.appendChild(script);
    }

    //定义请求回调函数，在此拿到计算得到的路线，并进行绘制
    function cb(ret){
        var coords = ret.result.routes[0].polyline, pl = [];
        //坐标解压（返回的点串坐标，通过前向差分进行压缩）
        var kr = 1000000;
        for (var i = 2; i < coords.length; i++) {
            coords[i] = Number(coords[i - 2]) + Number(coords[i]) / kr;
        }
        //将解压后的坐标放入点串数组pl中
        for (var i = 0; i < coords.length; i += 2) {
            pl.push(new TMap.LatLng(coords[i], coords[i+1]));
        }

        display_polyline(pl)//显示路线

        //标记起终点marker
        var marker = new TMap.MultiMarker({
            id: 'marker-layer',
            map: map,
            styles: {
                "start": new TMap.MarkerStyle({
                    "width": 25,
                    "height": 35,
                    "anchor": { x: 16, y: 32 },
                    "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
                }),
                "end": new TMap.MarkerStyle({
                    "width": 25,
                    "height": 35,
                    "anchor": { x: 16, y: 32 },
                    "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
                })
            },
            geometries: [{
                "id": 'start',
                "styleId": 'start',
                "position": new TMap.LatLng(39.984039,116.307630307503)
            }, {
                "id": 'end',
                "styleId": 'end',
                "position": new TMap.LatLng(39.977263,116.337063)
            }]
        });

    }

    function display_polyline(pl){
        //创建 MultiPolyline显示折线
        var polylineLayer = new TMap.MultiPolyline({
            id: 'polyline-layer', //图层唯一标识
            map: map,//绘制到目标地图
            //折线样式定义
            styles: {
                'style_blue': new TMap.PolylineStyle({
                    'color': '#3777FF', //线填充色
                    'width': 8, //折线宽度
                    'borderWidth': 5, //边线宽度
                    'borderColor': '#FFF', //边线颜色
                    'lineCap': 'round', //线端头方式
                })
            },
            //折线数据定义
            geometries: [
                {
                    'id': 'pl_1',//折线唯一标识，删除时使用
                    'styleId': 'style_blue',//绑定样式名
                    'paths': pl
                }
            ]
        });
    }

</script>